<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--    搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--    按钮和分页-->
        <el-col :span="24" class="btn-page-wrapper">
          <el-button type="success" @click="uploadVideo()">上传视频</el-button>
          <el-button type="success" @click="release()" :disabled="releaseDisabled">发布</el-button>
          <el-button @click="remove()" :disabled="removeDisabled">删除</el-button>
        </el-col>
        <!--    表格-->
        <el-col :span="24" class="data">
          <el-table
            :data="data"
            stripe
            v-loading="loading"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column prop="duration" label="视频时长(s)" align="center"></el-table-column>
            <el-table-column prop="source" label="视频来源" align="center"></el-table-column>
            <el-table-column prop="creationTime" label="视频上传时间" align="center"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" align="center"></el-table-column>
            <el-table-column prop="praiseQuantity" label="点赞数" align="center"></el-table-column>
            <el-table-column prop="commentsQuantity" label="评论数" align="center"></el-table-column>
            <el-table-column prop="viewerQuantity" label="浏览数" align="center"></el-table-column>
            <el-table-column prop="statusValue" label="状态" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center" width="180">
              <template slot-scope="scope">
                <!--待发布-->
                <div v-if="scope.row.statusValue == '待发布'">
                  <el-button @click.stop="uploadVideo(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="release(scope.row.id)" type="text">发布</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--待审核-->
                <div v-if="scope.row.statusValue == '待审核'">
                  <el-button @click.stop="uploadVideo(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--已拒绝-->
                <div v-if="scope.row.statusValue == '已拒绝'">
                  <el-button @click.stop="uploadVideo(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--已下架-->
                <div v-if="scope.row.statusValue == '已下架'">
                  <el-button @click.stop="uploadVideo(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="release(scope.row.id)" type="text">发布</el-button>
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
                <!--已禁用-->
                <div v-if="scope.row.statusValue == '已禁用'">
                  <el-button @click.stop="view(scope.row.id)" type="text">查看</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!--上传视频对话框-->
    <upload @close="closeUpload" :id-list="idList" :is-upload="isUpload"></upload>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import Upload from '@/framework/components/dialog/short-video/draft/upload'
import PageMixin from '@/framework/mixins/pageMixin'
import Normalize from '@/framework/mixins/normalize'
import {findWithMe,countWithMe,batchDeleted,batchRelease} from '@/project/service/video'

export default {
  name: "list",
  mixins: [
    PageMixin,
    // Normalize(search, count)
  ],
  data(){
    return{
      searchItems: [
        {name: '标题', key: 'title', type: 'string'},
        {name: '状态', key: 'status', type: 'select',
          displayValue: ['待审核', '已拒绝', '待发布', '已下架', '已禁用'],
          value:{
            0:'pending', 1:'rejected' , 2:'unpublished',
            3:'removed' , 4:'disabled'
          }
        }
      ],
      data:[
        // {title:'纺织',videoTime:'12',videoSource:'上传',uploadTime:'2022-01-05 08:00',releaseTime:'',giveALike:'0',commentNum:'0',browseNum:'0',state:'待发布'},
        // {title:'现代纺织业',videoTime:'18',videoSource:'拍摄',uploadTime:'2022-01-10 18:00',releaseTime:'2022-01-10 19:00',giveALike:'0',commentNum:'0',browseNum:'0',state:'待审核'},
        // {title:'纺织品',videoTime:'23',videoSource:'拍摄',uploadTime:'2022-01-03 09:00',releaseTime:'2022-01-03 10:00',giveALike:'0',commentNum:'0',browseNum:'0',state:'已拒绝'},
        // {title:'国际纺织展览会',videoTime:'68',videoSource:'上传',uploadTime:'2022-01-05 20:00',releaseTime:'2022-01-05 21:00',giveALike:'89152',commentNum:'65128',browseNum:'102103',state:'已下架'},
        // {title:'布料讲解',videoTime:'32',videoSource:'上传',uploadTime:'2022-01-02 12:00',releaseTime:'2022-01-02 13:00',giveALike:'56215',commentNum:'14518',browseNum:'61548',state:'已禁用'},
      ],
      isUpload: false,
      idList:[],
      releaseDisabled: true,//是否禁用发布按钮
      removeDisabled: true,//是否禁用删除按钮
      loading: true,
    }
  },
  components: { Search, Upload },
  created(){
    this.listUpdate()
  },
  methods:{
    //查询短视频列表
    search(obj,type){
      findWithMe(obj,data => {
        data.forEach(item => {
          item.id = item.id.toString()
          if (item.status == 'pending') {
            item.statusValue = '待审核'
          } else if (item.status == 'rejected') {
            item.statusValue = '已拒绝'
          } else if (item.status == 'unpublished') {
            item.statusValue = '待发布'
          } else if(item.status == 'removed') {
            item.statusValue = '已下架'
          }else if(item.status == 'disabled'){
            item.statusValue = '已禁用'
          }
        })
        console.log(data)
        this.data = data
        this.loading = false
        if(type=='search'){
          this.$message.success('查询成功')
        }
      })
    },
    //统计短视频数量
    getCount(title,status){
      //条件搜索
      if(title || status){
        countWithMe({video:{title, status, publish:false}}, data => {
          this.total = data
        })
      }else{
        countWithMe({video:{publish:false}}, data => {
          this.total = data
        })
      }
    },
    //短视频列表更新
    listUpdate(){
      let listParam = {
        video:{publish: false,},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(listParam)
      this.getCount('','')
    },
    //条件搜索
    searchBySearchItem(res){
      this.loading = true
      console.log(res)
      let param = {
        video:{title: res.title,status: res.status,publish:false},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      // console.log('传参')
      // console.log(param)
      this.search(param,'search')
      this.getCount(res.title,res.status)
    },
    //表格项选择触发事件
    handleSelectionChange(row){
      let idList = []
      let stateList=[]
      //判断是否进行了行选择
      if(row.length == 0){
        this.releaseDisabled = true
        this.removeDisabled = true
      }else{
        this.removeDisabled = false
        row.forEach(item=> {
          //判断发布按钮是否可用，若存在选择行状态为待发布、已下架则可用，返回成功状态的promise
          let p = new Promise((resolve,reject) => {
            if(item.statusValue == '待发布' || item.statusValue == '已下架'){
              resolve()
            }else{
              reject()
            }
          })
          stateList.push(p)
          idList.push(item.id)
        })
        //当stateList中的promise对象全为成功状态时发布按钮可用
        Promise.all(stateList).then(val => {
          this.releaseDisabled = false
        },err => {
          this.releaseDisabled = true
        })
        //获取id数组
        this.idList = idList
      }
    },
    //上传视频
    uploadVideo(id){
      this.idList = id ? [id] : []
      this.isUpload = true
    },
    //关闭上传视频
    closeUpload(isUpdate){
      this.isUpload = false
      if(isUpdate){
        this.listUpdate()
      }
    },
    //发布
    release(id){
      this.$confirm('确定发布选中视频吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id.toString()] : this.idList
        // console.log(this.idList)
        batchRelease({idList: this.idList},data => {
          if(data == '204'){
            this.$message.success('发布成功')
            this.listUpdate()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //查看
    view(id){
      this.$router.push({path:'/video/draft/show/'+ id})
    },
    //删除
    remove(id){
      this.$confirm('删除后不可恢复，是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行还是多行
        this.idList = id ? [id] : this.idList
        console.log(this.idList)
        batchDeleted({idList: this.idList},data => {
          if(data == '204'){
            this.$message.success('删除成功')
            this.listUpdate()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
}
</script>

<style lang="less" scoped>
.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
